<template>
  <div>
    <a-row style="margin:0;padding: 20px;" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <a-col class="col-pad" :span="6" v-for="(item,index) in banklist" :key="item.name" :index="index">
        <div class="bank-div">
          <div class="bankhead">
            {{item.bankName}}
            <span>{{ item.type == 'D' ? "借记卡" : "信用卡"}}</span>
          </div>
          <div class="bankno">
            <a-hide-data :params="{type:'bankCard',value:item.cardNo}"></a-hide-data>
          </div>
          <a href="#" @click="showConfirm(item)" class="deleteClass">删除</a>

          <!-- <div class="bankno">{{item.cardNo}}</div> -->
          <!-- <span class="delBankCard" @click="deleteBankCard(item)">删 除</span> -->
        </div>
      </a-col>
      <a-col :span="6" class="col-pad">
        <div class="bank-div addbank" v-if="banklimit">
          <a-icon @click="goAddbank" style="color:#ccc;" type="plus" />
          <a-button type="primary" @click="goAddbank">新增银行卡</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";
  import GlobalFooter from "../../layouts/GlobalFooter";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import moment from "moment";
  import DetailList from "../../components/tool/DetailList";
  import AHideData from "../common/HideData";
  import { message } from "ant-design-vue";
  import api from "@/common/api";
  import { error } from "util";
  import { fail } from "assert";

  const ATabPane = ATabs.TabPane;
  const DetailListItem = DetailList.Item;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      GlobalFooter,
      ATabPane,
      ATabs,
      AForm,
      DetailListItem,
      DetailList,
      AHideData
    },
    data() {
      return {
        form: this.$form.createForm(this),
        banklist: [],
        bankCount: 0,
        userName: "",
        banklimit:true
      };
    },
    watch: {},
    filters: {
      bankNofilter(value) {
        return "***************" + value.substring(value.length - 4);
      }
    },
    computed: {},
    mounted() {
      
    },
    activated() {
      this.bankCardSearch();
    },
    methods: {
      goAddbank() {
        console.log(this.bankCount);
        console.log(this.bankCount > 5);
        if (this.bankCount > 4) {
          alert("个人用户最多可绑定五张卡");
          return;
        }
        console.log("userName", this.userName);
        this.$router.push({
          path: "/per/bankadd/bankno"
        });
        sessionStorage.setItem("addbankType", "1"); //1 为正常添加银行卡 2 为提现添加 3充值添加
      },
      bankCardSearch: function () {
        this.$axios.get("/agent/binding/bankCard/select").then(res => {
           console.log(res)
          if (res.data.code == "OK") {
            if (res.data.data) {
              this.banklist = res.data.data.list;
              this.bankCount = res.data.data.count;
              this.userName = res.data.data.userName;
              // console.log("已持有银行卡数：", res.data.data.count);
              if(res.data.data.count >= 5){
                this.banklimit = false
              }else{
                this.banklimit = true
              }
            } else {
              console.log("无");
              this.banklist = [];
            }
          } else {
          }
        });
      },
      deleteBankCard: function (obj) {
        //console.log(index);
        //console.log(obj);
        let bankdata = {
          memberNo: obj.memberNo,
          cardNo: obj.cardNo
        };
        this.$axios.post("/agent/binding/bankCard/delete", bankdata).then(res => {
          if (res.data.code == "OK") {
            this.$message.success('解绑成功！')
            this.bankCardSearch();
          } else {
            this.$message.error(res.data.message)
            console.log("无");
          }
        });
      },
      showConfirm(item) {
        let self = this;
        this.$confirm({
          title: "删除银行卡",
          content: "请确认是否删除银行卡",
          okText: "确认",
          cancelText: "取消",
          onOk() {
            // return new Promise((resolve, reject) => {
            self.deleteBankCard(item);
            //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
            // }).catch(() => console.log("Oops errors!"));
          },
          onCancel() { }
        });
      }
    }
  }

</script>

<style lang="less" scoped>
  span,
  i {
    cursor: pointer;
  }

  li {
    list-style: none;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
    width: 80%;
    color: #333;
  }

  .formGroupTitle1 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
    width: 80%;
    color: #333;
  }

  .ant-tabs-nav {
    float: right;
  }

  .img-div {
    display: flex;
    flex-direction: column;

    .img-sty {
      width: 100px;
    }
  }

  .bank-div {
    border-radius: 5px;
    border: 1px solid #ccc;
    height: 22vh;
    position: relative;
    .deleteClass{
      position: absolute;
      bottom:10px;
      right: 10px;
    }

    .bankhead {
      border-bottom: 2px solid #ccc;
      padding: 15px;
      overflow: hidden;

      span {
        float: right;
      }
    }

    .bankno {
      text-align: center;
      padding: 15px;
    }

    .delBankCard {
      text-align: right;
      padding: 30px;
      color: #f00000;
      float: right;
    }
  }

  .col-pad {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .addbank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  i {
    svg {
      width: 100px;
      height: 100px;
    }
  }

  // .formGroupTitle {
  //   font-size: 20px;
  //   font-weight: bold;
  //   text-align: right;
  // }
</style>